﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name="header_name" ref ="header_el"></Header_other>
    <!--<div style="height: 2.2rem;"></div>-->
    <div class="main_container">
      <!--<div class="main_container_header clearfix">
          <div class="main_container_header_act">通知</div>
          <div class="">背影寻人</div>
          <div class="">求助信息</div>
          <div class="">私信</div>
          <img src="../../static/img/nav_fenhao.png" class="wenhao_img">
      </div>-->
      <!-- scroll_wrap -->
      <div id="wrap_scroller" ref="wrap_scroller_ref">
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite" class="clearfix">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <!-- content goes here -->
            <!-- box -->
              <div class="Letter_box clearfix" v-for="info in menu_list" :key="info.id">
                  <div class="letter_box_header_wrap clearfix">
                    <!--<img src=
                         '{info.sendUser.image == null||info.sendUser.image == undefined?"../../static/img/bg_all.png?1":info.sendUser.image}'
                         class="letter_box_head">-->
                    <img v-bind:src="info.image" class="letter_box_head">
                    <div class="leftter_box_right">
                      <div class="bz_nane">
                        {{info.userName}}
                      </div>
                      <div class="letter_box_id">
                        ID:{{info.id}}
                      </div>
                    </div>
                    <div class="letter_box_right_btn">
                      <!--<div class="btn_base">加好友</div>
                      <div class="btn_base gz_btn">关注</div>
                      <div class="btn_base">回信</div>-->
                    </div>
                  </div>
                  <div class="Letter_box_letter">
                  {{info.content}}
                  </div>
              </div>
              
            <!-- box -->
            <!-- box -->
            <!--<div class="Letter_box clearfix">
              <div class="letter_box_header_wrap clearfix">
                <img src="../../static/img/bg_all.png" class="letter_box_head">
                <div class="leftter_box_right">
                  <div class="bz_nane">
                    李萍
                  </div>
                  <div class="letter_box_id">
                    ID:1018020
                  </div>
                </div>
                <div class="letter_box_right_btn">
                  <div class="btn_base">加好友</div>
                  <div class="btn_base gz_btn">关注</div>
                  <div class="btn_base">回信</div>
                </div>
              </div>
              <div class="Letter_box_letter">
                Nice to meet you！
                披荆斩棘只为遇见你，用情地动你！
                随风而遇！浪漫有你！
              </div>
            </div>-->
            <!-- box -->
          </div>
        </scroller>
      </div>
      </div>

    <!-- 输入评论s -->
    <div class="commit_input">
      <input type="text" name="name" value="" class="commit_input_in" placeholder="输入评论" ref="content"/>
      <div class="upload_commit" v-on:click="commit">
        提交
      </div>
    </div>
    <!-- 输入评论e -->

    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));
  import common from "../common/common.js"
  import { Toast, Indicator } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name: "活动评论",
      layer_give_friend_data: false,
      give_other_data: false,
      this_box_msg: {},
      menu_list:[]
    }
  },
  ...mapActions([
    "thom_redirect",
   
  ]),
 
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    document.getElementsByClassName("header_title_other")[0].style.marginLeft = 0;
    document.getElementById("app").style.height = "auto";
    //limit_scroll(this.$refs.el, this.$refs.git_contain);
    //qs.stringify({ 'rid': 2, "pageNo": 0, "pageSize": 6 }))
    Indicator.open();
    let rank_id = sessionStorage.getItem("s_id");
    this.$http.get('/yizhiweimen/api/user/activity/getCommentEnrollactive?enrollactiveId=' + rank_id,
      qs.stringify(
        {
          "enrollactiveId": rank_id,
        })
    )
      .catch((thrown) => {
        Indicator.close();
        console.log(thrown)
      }).then((e) => {
        Indicator.close();
        console.log("rank_____________");
        console.log(e.data);
        this.menu_list = e.data;
        this.$nextTick(() => {
          let height = document.body.clientHeight;
          let header_el = this.$refs.header_el.$el;
          console.log("header_el_")
          console.log(header_el);
          let header_h = window.getComputedStyle(header_el).height.replace("px","");
          console.log("header_h")
          console.log(header_h);
          console.log("result")
          console.log(parseInt(header_h) + parseInt(height))
          this.$refs.wrap_scroller_ref.style.height = parseInt(header_h) + parseInt( height) +"px";
        })
    })
  },
  methods: {
    get_data: function () {
      Indicator.open();
      let id = location.search.split("user_id=")[1];
      let rank_id = sessionStorage.getItem("s_id");
      this.$http.get('/yizhiweimen/api/user/activity/getCommentEnrollactive?enrollactiveId=' + rank_id,
        qs.stringify(
          {
            "enrollactiveId": rank_id,
          })
      )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown)
        }).then((e) => {
          Indicator.close();
          console.log("rank_____________");
          console.log(e.data);
          this.menu_list = e.data;
         
        })
    },
    //提交评论
    ///api/user/activity/comment
    commit: function () {
      let uid = sessionStorage.getItem("user_id")
      let rank_id = sessionStorage.getItem("s_id");
      let content = this.$refs.content.value;
      if (content == "") {
        Toast({
          message: '请输入评论内容',
          position: 'bottom',
          duration: 2000
        });
        return;
      }
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/activity/comment',
        qs.stringify(
          {
            "enrollactiveId": rank_id,
            "uid": uid,
            "content": content
          })
         )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown)
        }).then((e) => {
          Indicator.close();
         console.log("content___________________")
         console.log(e.data);
         this.get_data();
        })
    },
    //下拉
    ...mapGetters([
      "get_ajax_base"
    ]),
    refresh: function (done) {
      let uid = sessionStorage.getItem("user_id")
      let rank_id = sessionStorage.getItem("s_id");
      let content = this.$refs.content.value;
      Indicator.open();
      this.$http.get('/yizhiweimen/api/user/activity/getCommentEnrollactive?enrollactiveId='  + rank_id,
        qs.stringify(
          {
            "enrollactiveId": rank_id,
            "uid": uid,
            "content": content
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown)
        }).then((e) => {
          Indicator.close();
          this.menu_list = e.data
          done();
        })
    },
    //上啦
    infinite: function (done){ 
      setTimeout(function () {
        done(true);
      },1000)
    },
    //弹出层 
    layer_give_friend_f: function () {
      this.layer_give_friend_data = !this.layer_give_friend_data;
    },
    give_other: function () {
      this.give_other_data = !this.give_other_data
    },
    hide_detail_1: function () {
      this.layer_show = false;
    },
    //页面跳转
    goTo: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    open_certain_btn:function () {
        //show_layer 判断显示
      this.$store.dispatch("thom_redirect",
      {
          name:"/Index_main/Wrap_certain_layer/Certain_layer_input",router:this.$router
      });
    },
    goTo_letter_man:function() {
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_man", router: this.$router
        });
    }

  },
  components: {
    Header_other
  }
}
</script>
<style>
  .header_title_other{
    margin-left:0;
    width:100%;
    margin:0 auto;
  }
</style>
<style scoped>
  /*添加评论s*/
  .commit_input_in {
    width: 70%;
    height: 96%;
    padding-left: 6vw;
    font-size: 4vw;
    border: 0;
    margin-right: 4vw;
    padding-left: 4vw;
    outline: none;
    border-radius: 4vw 4vw 4vw 4vw;
    box-shadow: 2px 2px 6px 2px rgba(180, 180, 180, 0.62);
  }
  .upload_commit {
    width: 25%;
    height: 12vw;
    line-height: 12vw;
    border-radius: 2vw;
    text-align: center;
    text-align: center;
    background-color: #e85454;
    border-radius: 4vw;
    color: #fff;
    box-shadow: 2px 2px 6px 2px rgba(180, 180, 180, 0.62);
  } 
  .commit_input {
    position: fixed;
    bottom: 10vw;
    width: 90vw;
    left: 50%;
    transform: translateX(-50%);
    height: 12vw;
    border-radius: 4vw;
    padding-left:2vw;
    display: flex;
  }
  /*添加评论e*/
  .Letter_box_letter {
    text-align: center;
    color: #9f5c2f;
    font-size: 0.7rem;
    background-color: #fff;
    padding: 1.3rem 3.2rem;
    border-radius: 2vw;
    width: 61%;
    margin-bottom: 1rem;
    box-shadow: 2px 2px 4px 2px rgba(180, 180, 180, 0.62);
    margin-top: 0.2rem;
  } 
  .letter_box_right_btn .gz_btn {
    color: #fff;
    background-color: #9f5c2f;
  } 
  .btn_base {
    float: left;
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    margin-top: 1.15rem;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
    border-radius: 1.2vw;
    margin-right: 0.1rem;
    text-align: center;
  } 
  .letter_box_right_btn {
    float: right;
  }
  .Letter_box {
    width: 90%;
    margin: 1rem auto 0;
  }
  .letter_box_id {
    font-size: 0.7rem;
    color: #9f5c2f;
    margin-left:0.2rem;
    margin-top:0.1rem;
  } 
  .leftter_box_right {
    float: left;
  } 
  .bz_nane {
    padding: 0.35rem 0.75rem;
    background-color: #9f5c2f;
    border-radius: 1vw;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    margin-left: 0.2rem;
    width:50%;
    letter-spacing:1px;

  } 
  .letter_box_head {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 2px solid #9f5c2f;
    float: left;
    border-radius: 1vw;
  } 
  #wrap_scroller {
    //transform:translateY(20px);
    height: 28.4rem;
  } 
  .box_bottom_wrap {
    margin-top: 0.3rem;
    padding-left: 5%;
    padding-right: 5%;
  } 
  .m_L_15 {
    margin-left: 2vw;
  } 
  .box_bottom_wrap .red_c {
    color: #e85454;
    border: 2px solid #e85454;
  }
  .box_base_btn {
    width: 20%;
    font-size: 0.7rem;
    height: 1.25rem;
    line-height: 2;
    border-radius: 2vw;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
  } 
  .box_list li {
    width: 48%;
  }
  .box_list {
    border-radius:2vw;
    background-color: #eeeeee;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 2.45rem;
    width: 11.75rem;
    display: flex;
  } 
  .box_header_wrap {
    padding-left:1.4vw;
    padding-top:0.35rem;
    display: flex;
    justify-content: space-between;
  }
  .bor_bot {
    border-bottom: 1px solid #dfdfdf
  }
  .border_L {
    border-right: 1px solid #dfdfdf;
  }
  .box_img_s {
    display:block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 2vw;
    border: 2px solid #e9c7ac;
  } 
  .box {
    height: 7.5rem;
    width: 93%;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.6rem auto;
    box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
  } 
  .wenhao_img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
  }
   .main_container {
      height:100%;
      background-color: #eeeeee;
      margin-top:2.2rem;
  }
  .main_container_header {
    position:relative;
    height: 1.75rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    /*justify-content:space-between;*/
    font-size: 0.7rem;
    line-height: 2.6;
    color: #b4b4b4;
  }
  .main_container_header_act {
    color: #9f5c2f;
  }
  ._v-container{
    top:none;
    position:relative;
  }
  .git_Exchange_contain{
    height:100%;
  }
</style>